<template>
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <statis-header @getMsg="getMsg" @setTableNameBrowser="setTableNameBrowser" :baseExcelURL="baseExcelURL" :headerConfig="headerConfig"></statis-header>
    <chart-modal  :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <div class="tableBorder">
    <el-table id="DataTable" :data="tableData" border style="margin:10px 0px 10px 0px;">
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="compDate" label="对比时间"></el-table-column>
        <el-table-column prop="appType" label="浏览器类型"></el-table-column>
        <el-table-column prop="typeData" :label="tempDataTypeBrowser"></el-table-column>
        <el-table-column prop="change" label="变化情况(%)"></el-table-column>
        <el-table-column prop="shareRatio" label="总盘占比(%)"></el-table-column>
    </el-table>
    <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    </div>
</div>
</template>

<script>
import StatisHeader from './header/StatisHeader';
import ChartModal from './ChartModal'

import {
    setdataAll01,
    getMax
} from '../config/setChart.js';
import {
    getChartConfig,
    HeaderConfig
} from '../config/toolsui.config.js';
export default {
    data() {
        return {
            getDataByBrowserURL: '' + this.$store.state.domain + '/bzDCP/data/getDataForShow/browser',
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/data/getDataForExport/browser',
            tableData: [],
            headerData: '',
            headerConfig: {},
            currentPage: 1,
            pageSize: 10,
            tempDataTypeBrowser: '展现数',
            total: 0,
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01'
            },
            loading:true
        }
    },
    components: {
        StatisHeader,
        ChartModal
    },
    created() {
        this.initDataAll();
    },
    methods: {
        getMsg(data) {
            this.headerData = data;
            this.search();
        },
        setTableNameBrowser(data) {
            this.tempDataTypeBrowser = data;
        },
        getDataSearch(response) {
            var temArry = [];
            for (var i = 0; i < response.data.result.length / 2; i++) {
                temArry[i] = response.data.result[i];
            }
            this.tableData = temArry;
            this.total = response.data.total;
            var dataLength = response.data.result.length / 2;
            var legends = [];
            var datas = [];
            var comdata = [];
            for (var i = 0; i < dataLength; i++) {
                legends[i] = response.data.result[i].date;
                datas[i] = response.data.result[i].typeData;
                comdata[i] = response.data.result[i + dataLength].typeData;
            }
            var setMaxs = getMax([datas, comdata]);
            this.$store.state.chartOption['chart01'] = setdataAll01(legends.reverse(), [{
                        name: '查询时间',
                        type: 'bar',
                        data: datas.reverse()
                    },
                    {
                        name: '对比时间',
                        type: 'bar',
                        data: comdata.reverse()
                    }
                ],
                '',
                [{
                    name: '',
                    formatter: '',
                    max: setMaxs
                }]
            );
        },
        getData() {
            this.loading = false;
            this.$ajax.post(this.getDataByBrowserURL, this.qs.stringify({
                dataType: 1
            })).then(response => {
                if (response.status == 200) {
                    this.getDataSearch(response);
                } else {
                    this.$message.warning("网络错误！");
                    return;
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        search() {
            let _this = this.headerData;
            if (_this.TimeSpace == null) {
                this.$message.warning("查询条件不能为空！");
                return;
            } else {
                this.loading = true;
                this.currentPage=1;
                this.$ajax.post(this.getDataByBrowserURL, this.qs.stringify({
                    timeSpace: JSON.stringify(_this.TimeSpace),
                    compTimeSpace: JSON.stringify(_this.compTimeSpace),
                    radio: _this.radio,
                    check: _this.check,
                    dataType: _this.dataType,
                    browser: _this.browser,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                })).then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response)
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                    this.loading = false;
                }).catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
            }

        },
        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
            this.headerConfig = HeaderConfig;
            HeaderConfig.isCloud = true;
            HeaderConfig.browser = true;
            HeaderConfig.timeSpace = true;
            HeaderConfig.dataTypeBrowser = true;
            HeaderConfig.channelType = false;
            HeaderConfig.siteType = false;
            HeaderConfig.channel = false;
            HeaderConfig.prov = false;
            HeaderConfig.area = false;
            HeaderConfig.dataType = false;
            HeaderConfig.timePoint = false;
            HeaderConfig.winnt = false;
            HeaderConfig.wow = false;
            HeaderConfig.dataTypesoft = false;
            HeaderConfig.softenviron = false;
            HeaderConfig.isBar = false;
            HeaderConfig.isDev = false;
            
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getDataByBrowserURL,
                this.qs.stringify({
                    timeSpace: JSON.stringify(_this.TimeSpace),
                    compTimeSpace: JSON.stringify(_this.compTimeSpace),
                    check: _this.check,
                    dataType: _this.dataType,
                    browser: _this.browser,
                    radio: _this.radio,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }),

            ).then(response => {
                if (response.status == 200) {
                    this.getDataSearch(response)
                } else {
                    this.$message.warning('网络错误!');
                    return;
                }
                this.loading = false;
            }).catch(function (error) {
                console.log(error);
                this.loading = true;
            });
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getDataByBrowserURL,
                this.qs.stringify({
                    timeSpace: JSON.stringify(_this.TimeSpace),
                    compTimeSpace: JSON.stringify(_this.compTimeSpace),
                    radio: _this.radio,
                    check: _this.check,
                    dataType: _this.dataType,
                    browser: _this.browser,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }),
            ).then(response => {
                if (response.status == 200) {
                    this.getDataSearch(response)
                } else {
                    this.$message.warning('网络错误!');
                    return;
                }
                this.loading = false;
            }).catch(function (error) {
                console.log(error);
                this.loading = true;
            });
        },
    }
}
</script>

<style scoped>

</style>
